<template>
	<view class="detail" v-if="info">
		<view class="bgs">
			<view class="slogan">
				<view class="one">
					破局法律职场！ 
				</view>
				<view class="two">
					律师经纪人证书重塑职业新
				</view>
			</view>
			<image src="/static/aidex/images/zsbg.png" mode=""></image>
		</view>
		<u-navbar back-icon-color="#fff" :border-bottom="false" :background="background" title-color="#fff"
			title-size="34" title="证书报名"></u-navbar>

		<view class="content">
			<view class="info">


				<view class="desc">
					<u-parse :html="info.content"></u-parse>


				</view>
			</view>
			
			
			<view v-if="info.is_orde==0" class="footer">
				<view class="wrap">
					<view class="left">
						
						<view class="item1" @click="wx(info,1)">
							<image src="/static/aidex/images/d2.png" mode=""></image>
							<view class="text">
								微信沟通
							</view>
						</view>
					</view>
					<view class="item2">
						<u-button @click="buy(info)" class="btn" shape="circle" type="primary" :ripple="true"
							ripple-bg-color="#909399">立即购买</u-button>
					</view>
				</view>
			</view>
			
			
			<view v-else class="btns">
							<view @click="wx(info)" class="item">
								<image src="/static/aidex/images/wx16.png" mode=""></image>
								微信咨询
							</view>
							<view class="item" @click="tell(info)">
								<image src="/static/aidex/images/tel.png" mode=""></image>
								电话咨询
							</view>
						</view>
			
			
		</view>
		<!-- 添加二维码 -->

		<u-popup close-icon-color="#999" :closeable="true" v-model="show" mode="center" border-radius="14">
			<view class="pop">

				<image :show-menu-by-longpress="true" :src="info.platform_image" mode=""></image>
				<view class="tips">
					长按识别二维码添加客服
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		checkLogin,
		checkIsVip,
		checkLoginAndIsVip
	} from '../../../utils/checklogin.js'
	export default {
		data() {
			return {
				show: false,
				background: {
					background: 'none'
				},
				info: null
			}
		},
		methods: {

			wx(item) {
				this.show = true
			},
			tell(item) {
				uni.makePhoneCall({
					phoneNumber: item.platform_tel, // 电话号码
					success: function() {
						console.log('拨打电话成功！');
					},
					fail: function(err) {
						console.log('拨打电话失败：', err);
					}
				});
			},
			buy(info) {
			
				if (!this.vuex_srls_token) {
					uni.navigateTo({
						url: "/pages/sys/login/index"
					})
			
				} else {
					this.pay({
						type: 4, //下单类型，1、会员购买；2、精选服务；3、专业咨询
						goods_id: '10086',
					})
				}
			},
			
			pay(info) {
				let that = this;
				this.$u.api
					.Orderbuy(info)
					.then((resDate) => {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: resDate?.timeStamp,
							nonceStr: resDate?.nonceStr,
							package: resDate?.package,
							signType: resDate?.signType,
							paySign: resDate?.paySign,
							success: function(res) {
								that.getinfo()
							},
							fail: function(err) {
								// that.info.is_order=1
								console.log('fail:' + JSON.stringify(err));
							}
						});
			
					});
			},
			getinfo(){
				this.$u.api
					.zsbm({
						goods_id: '10086'
					})
					.then((res) => {
						this.info = res?.data;
					});
			},

		},
		onLoad(e) {
			// this.$u.vuex("vuex_srls_isvip", 0)
			this.getinfo()
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.slogan{
		position: absolute;
		left: 30rpx;
		top: 199rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 56rpx;
		.one{
			font-size: 30rpx;
		}
		.two{
			
		}
	}
	.pop {
		padding: 30rpx 50rpx;

		image {
			width: 500rpx;
			height: 500rpx;
			margin: 30rpx auto 10rpx;
		}

		.tips {
			text-align: center;
			padding: 20rpx 0;
			color: #999;
		}
	}

	.content {
		height: 62vh;
		
		padding: 40rpx 0 0;
		margin: 250rpx 0 28rpx;
		// height: 1546rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		.info {
			overflow-y: auto;
			height: 100%;
			padding: 0 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
		}

		.btns {

			margin: 30rpx 24rpx;
			height: 92rpx;
			background: #00B9A7;
			border: 1px solid #00B9A7;
			border-radius: 52rpx;
			display: flex;
			align-items: center;
			overflow: hidden;

			image {
				margin-right: 14rpx;
				width: 42rpx;
				height: 42rpx;
			}

			.item {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				height: 96rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				&:first-child {
					background: #FFFFFF;
					color: #00B9A7;
				}

				&:last-child {
					background: #00B9A7;
					color: #fff;
				}


			}
		}

		.head {
			width: 180rpx;
			height: 180rpx;
			border-radius: 24rpx;
			border: 1rpx solid #979797;
			position: absolute;
			right: 27rpx;
			top: -105rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 48rpx;
			color: #000000;
			display: flex;
			align-items: flex-end;
			line-height: 1;

			text {
				margin-left: 15rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				line-height: 1;
			}
		}

		.addr {
			margin: 20rpx 0;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}

		.year {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 37rpx;
		}

		.sc {
			margin: 16rpx 0;
		}

		.desc,
		.sc {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: justify;
		}

	}

	.bgs {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: -1;

		image {
			width: 100%;
			height: 441rpx;
		}
	}
	
		.footer {
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 168rpx;
			background: #fff;
			z-index: 9;
			left: 0;
			right: 0;
	
			.wrap {
				padding: 43rpx 24rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
	
	
	
	
			.left {
				display: flex;
				align-items: center;
				margin-right: 42rpx;
	
				&.active {
					width: 100%;
					justify-content: space-around;
				}
			}
	
			.item1 {
				// width: 100rpx;
	
				&:first-child {
					margin-right: 86rpx;
				}
	
				image {
					display: block;
					width: 42rpx;
					height: 42rpx;
					margin-bottom: 2rpx;
					margin: 0 auto;
				}
	
				.text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 28rpx;
				}
			}
	
			.item2 {
				flex: 1;
			}
	
			.btns1 {
	
				width: 100%;
				height: 96rpx;
				background: #00B9A7;
				border-radius: 48rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
	
				.btn {
					width: 100%;
				}
	
				/deep/ .u-size-default {
					border-radius: 48rpx !important;
					height: 96rpx !important;
					line-height: 96rpx !important;
					font-family: PingFangSC, PingFang SC !important;
					font-weight: 600 !important;
					font-size: 36rpx !important;
				}
			}
		}
	
	
</style>